<template>
	<view>
		<!-- 举报  -->
		<u-popup v-model="isShow" mode="center" border-radius="5">
			<view class="sendMsg">
				<view class="header u-flex u-row-between u-p-l-30 u-p-r-30 u-p-t-20 u-p-b-20">
					<view class="">举报</view>
					<u-icon name="close" @click="close"></u-icon>
				</view>
				<view class="u-p-l-30 u-p-r-30">
					<view class="alert-info u-p-30 u-font-24" :style="[{ backgroundColor: theme.lightColor, color: theme.bgColor }]">
						让我们一起共建文明社区！您的反馈至关重要！
					</view>
				</view>
				<view class="u-p-l-30 u-p-r-30">
					<u-radio-group v-model="jb_form.reason">
						<view class="u-flex u-flex-wrap">
							<view class="content" v-for="(item, index) in vuex_config.reportreasonlist" :key="index">
								<view class="u-m-10 u-p-l-20 u-flex">
									<u-radio :active-color="theme.bgColor" :name="index" label-size="24">{{ item }}</u-radio>
								</view>
							</view>
						</view>
					</u-radio-group>
				</view>
				<view class="u-p-l-30 u-p-r-30"><u-input :auto-height="false" v-model="jb_form.content" type="text" :border="true" /></view>
				<view class="u-p-t-30 u-p-b-30 u-text-center u-border-top">
					<u-button
						hover-class="none"
						type="primary"
						:custom-style="{ width: '60vw', height: '60rpx', backgroundColor: theme.bgColor, color: theme.color }"
						size="mini"
						@click="jbConfirm"
					>
						提交反馈
					</u-button>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
export default {
	name: 'fa-report',
	props: {
		source_id: {
			type: [Number, String],
			default: 0
		},
		type: {
			type: String,
			default: 'comment'
		}
	},
	data() {
		return {
			isShow: false,
			jb_form: {
				id: 0,
				type: 'comment',
				reason: 1,
				content: ''
			}
		};
	},
	methods: {
		show() {
			this.isShow = true;
		},
		close() {
			this.isShow = false;
		},
		jbConfirm: async function() {
			this.close();
			this.jb_form.id = this.source_id;
			this.jb_form.type = this.type;
			let res = await this.$api.goReportCreate(this.jb_form);
			this.$u.toast(res.msg);
			if (!res.code) {
				return;
			}
			this.jb_form = {
				id: 0,
				type: 'comment',
				reason: 0,
				content: ''
			};
		}
	}
};
</script>

<style lang="scss">
.content {
	width: 50%;
}
.sendMsg {
	width: 600rpx;
	height: 800rpx;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	.header {
		border-bottom: 1px solid #eee;
		background-color: #f8f8f8;
	}
	.alert-info {
		border-radius: 6rpx;
	}

}
</style>
